<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>患者信息查询</title>
    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="/element-theme/blue/index.css">
</head>
<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .default-row {
        background: #f0f9eb;}
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 90%;
    }

</style>
<body>
<div class="data-manage-table">
    <template>
        <el-form ref="registerForm" :model="registerForm" :rules="registerFormRules" :inline="true" label-position="right" label-width="100px" style="padding:20px 20px 0 20px;">
            <!-- <el-button type="primary" style="margin-right: 40px;">批量删除</el-button> -->
            <el-form-item  label="病历号" prop="medicalRecordNumber">
                <el-input v-model="registerForm.medicalRecordNumber"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary"@click="load">病历号搜索</el-button>
<!--                <el-button type="">导出</el-button>-->
<!--                <el-button type="">打印</el-button>-->
                <el-form-item  label="血液ID" prop="bloodId" style="position:sticky;right:50px">
                    <el-input v-model="registerForm.bloodId"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"@click="loadById" style="position:sticky;right:50px">血液ID搜索</el-button>
                </el-form-item>
                <el-switch size="medium"
                           style="position:fixed;top:35px;right:50px"
                           active-text="显示未支付订单"
                           inactive-text="显示全部订单"
                           font-size="50px"
                           v-model="state"
                           active-color="#00A854"
                           active-value="1"
                           inactive-color="#F04134"
                           inactive-value="0"
                           @change="load()"
                >
                </el-switch>
            </el-form-item>
        </el-form>

        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>患者个人信息</span>
            </div>
            <el-descriptions  direction="vertical" :column="12" border v-if="isFlag">
                <el-descriptions-item label="病历号" :span="3">{{tableData[0].medicalRecordNumber}}</el-descriptions-item>
                <el-descriptions-item label="姓名":span="2">{{tableData[0].name}}</el-descriptions-item>
                <el-descriptions-item label="性别" >{{tableData[0].gender}}</el-descriptions-item>
                <el-descriptions-item label="年龄">{{tableData[0].age }}</el-descriptions-item>
                <el-descriptions-item label="民族">{{tableData[0].nationality}}</el-descriptions-item>
                <el-descriptions-item label="科室">{{tableData[0].department}}</el-descriptions-item>
                <el-descriptions-item label="床位">{{tableData[0].bedNumber}}</el-descriptions-item>
                <el-descriptions-item label="怀孕次数">{{tableData[0].pregnancy}}</el-descriptions-item>
                <el-descriptions-item label="生产次数">{{tableData[0].production}}</el-descriptions-item>
                <el-descriptions-item label="既往病史":span="4">{{tableData[0].medicalHistory}}</el-descriptions-item>
                <el-descriptions-item label="输血历史":span="3">{{tableData[0].tansfusionHistory}}</el-descriptions-item>
                <el-descriptions-item label="属地":span="3">{{tableData[0].territorial}}</el-descriptions-item>
                <el-descriptions-item label="单位":span="3">{{tableData[0].unit}}</el-descriptions-item>
            </el-descriptions>
        </el-card>
        <el-card  style="margin-top: 30px" class="box-card">
            <div slot="header" class="clearfix">
                <span>输血记录详情</span>
                <el-button type="primary" @click="sum" style="position:fixed;left:80%">统计费用</el-button>
            </div>
            <el-table v-if="tableDataPay":data="tableDataPay.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                      style="width: 1620px" border
                      :row-class-name="tableRowClassName"
                      :header-cell-style="{'text-align': 'center','background': '#eef1f6'}" highlight-current-row
                      @current-change=""
            >
                <el-table-column type="selection" width="55" align="center"></el-table-column>

                <el-table-column prop="name" label="姓名" min-width="10%" align="center">
                </el-table-column>

                <el-table-column prop="bloodType" label="血液类型" min-width="15%" align="center">
                    <template slot-scope="scope">
                        {{getStateVarity(scope.row.bloodType)}}<!--调用getChangeType方法-->
                    </template>
                </el-table-column>

                <el-table-column prop="bloodId" label="血液ID" min-width="15%" align="center">
                </el-table-column>

                <el-table-column prop="bloodCount" label="血液数量" min-width="10%" align="center">
                </el-table-column>

                <el-table-column prop="department" label="科室" min-width="12%" align="center">
                    <template slot-scope="scope">
                        {{getDepartmentName(scope.row.department)}}<!--调用getChangeType方法-->
                    </template>
                </el-table-column>

                <el-table-column prop="createTime" label="订单生成时间" min-width="15%" align="center">
                </el-table-column>

                <el-table-column prop="payMoney" label="支付金额" min-width="12%" align="center">
                </el-table-column>


            </el-table>
            <el-pagination style="margin-top: 20px; text-align: center"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="[1,5,10,20]"
                           :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           v-if="tableDataPay":total="tableDataPay.length">
            </el-pagination>
        </el-card>
        <el-dialog title="费用统计" center :visible.sync="caculateState" width="45%" >
            <el-table :data="payForm" style="min-width: 80%" border
                      :header-cell-style="{'text-align': 'center','background': '#eef1f6'}" highlight-current-row
                      @current-change="">
                <el-table-column prop="name" label="姓名" min-width="33%" align="center">
                </el-table-column>
                <el-table-column prop="patientId" label="病历号" min-width="33%" align="center">
                </el-table-column>
                <el-table-column prop="totalMoney" label="总计费用" min-width="33%" align="center">
                </el-table-column>

            </el-table>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="cancel()">取 消</el-button>
                    <el-button type="primary" @click="">支付</el-button>
                </span>
        </el-dialog>
        <el-dialog title="血液Id查询" center :visible.sync="idSearch" width="80%" >
            <el-table :data="bloodData" style="min-width: 100%" border
                      :header-cell-style="{'text-align': 'center','background': '#eef1f6'}" highlight-current-row
                      @current-change=""
            >

                <el-table-column prop="bloodId" label="血液ID" min-width="15%" align="center">
                </el-table-column>

                <el-table-column prop="bloodType" label="血液类型" min-width="15%" align="center">
                    <template slot-scope="scope">
                        {{getStateVarity(scope.row.bloodType)}}<!--调用getChangeType方法-->
                    </template>
                </el-table-column>

                <el-table-column prop="name" label="姓名" min-width="10%" align="center">
                </el-table-column>

                <el-table-column prop="bloodCount" label="血液数量" min-width="10%" align="center">
                </el-table-column>

                <el-table-column prop="department" label="科室" min-width="12%" align="center">
                    <template slot-scope="scope">
                        {{getDepartmentName(scope.row.department)}}<!--调用getChangeType方法-->
                    </template>
                </el-table-column>

                <el-table-column prop="createTime" label="订单生成时间" min-width="15%" align="center">
                </el-table-column>

                <el-table-column prop="payMoney" label="支付金额" min-width="12%" align="center">
                </el-table-column>

            </el-table>

            <span slot="footer" class="dialog-footer">
                    <el-button @click="cancel()">退出</el-button>
                </span>
        </el-dialog>



    </template>
</div>

<link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">
<link rel="stylesheet" href="/element-theme/blue/index.css">
<link href="/css/2.15.12/index.css" rel="stylesheet">
<script src="/js/echarts.js"></script>
<script src="/plugins/vue-2.6.11/vue.js"></script>
<script src="/plugins/element-2.4.5/index.js"></script>
<script src="/icons/iconfont.js"></script>
<script src="/js/2.15.12/index.js"></script>
<script>Vue.prototype.$ELEMENT = { size: 'medium' };</script>
<script>
    (function () {
        var vm = window.vm = new Vue({
            el: '.data-manage-table',
            data() {

                const checkJobnum = (rule, value, callback) => {
                    if (!value) {
                        return callback(new Error('病历号不能为空'))
                    }
                    if (!/^\d+$|^\d+[.]?\d+$/.test(value)) {
                        callback(new Error('请输入正确的病历号'))
                    } else {
                        callback()
                    }
                }

                return {
                    registerForm: {
                        bloodId: "12311",
                        medicalRecordNumber: "121",
                    },
                    registerFormRules : {
                        medicalRecordNumber : [{
                            required : true,
                            message : '病历号不能为空',
                            trigger : 'blur',
                        }, {
                            validator: checkJobnum,
                            trigger : 'blur'
                        }],
                        bloodId : [{
                            required : true,
                            message : '血液编号不能为空',
                            trigger : 'blur',
                        }, {
                            validator: checkJobnum,
                            trigger : 'blur'
                        }],

                    },
                    //样本状态选择
                    //数据字典
                    getVarityState(){
                        fetch(`/bloodComposition/normal/getName`).then(res => res.json()).then(res => {
                            console.log("1"+res.code)
                            if (res.code == 200){
                                this.stateListVarity = res.data
                            } else {
                                this.$notify.error({
                                    title : '错误',
                                    message : '获取数据失败'
                                })
                            }
                        })
                    },
                    getStateVarity(code){
                        for (var i=0;i<this.stateListVarity.length;i++){
                            if (this.stateListVarity[i].code == code){
                                return this.stateListVarity[i].composition
                            }
                        }
                    },
                    getDepartmentState(){
                        fetch(`/bloodInformation/normal/listDepartment`).then(res => res.json()).then(res => {
                            console.log("1"+res.code)
                            if (res.code === 200){
                                this.stateList = res.data
                            } else {
                                this.$notify.error({
                                    title : '错误',
                                    message : '获取数据失败'
                                })
                            }
                        })
                    },
                    getDepartmentName(code){
                        for (var i=0;i<this.stateList.length;i++){
                            if (this.stateList[i].code == code){
                                return this.stateList[i].name
                            }
                        }
                    },
                    //表格信息
                    currentPage: 1, // 当前页码
                    total: null, // 总条数
                    pageSize:5 , // 每页的数据条数
                    //样本状态选择
                    isFlag:true,
                    state:'0',
                    //费用窗口结算
                    caculateState:false,
                    //血液ID查询
                    idSearch:false,
                    //表格信息
                    //部门选择
                    stateList:{},
                    //血液字典
                    stateListVarity:{},
                    tableDataPay: [
                        {
                            name: '',
                            createTime: '',
                            bloodType: '',
                            bloodId: '',
                            bloodCount: '',
                            department: '',
                            payMoney: '',
                            state: '',
                            patientId:''
                        }
                    ],
                    payForm:[
                        {
                            name: '',
                            patientId:'',
                            totalMoney:''
                        }],
                    bloodData: [
                        {
                            bloodId:'',
                            name: '',
                            createTime: '',
                            bloodType: '',
                            bloodCount: '',
                            department: '',
                            payMoney: '',
                            state: '',
                            patientId:''
                        }
                    ],
                    tableData: [
                        {
                            medicalRecordNumber: '',
                            name: '',
                            gender: '',
                            age: '',
                            nationality: '',
                            department: '',
                            bedNumber: '',
                            medicalHistory: '',
                            tansfusionHistory: '',
                            pregnancy: '',
                            production: '',
                            territorial: '',
                            unit: '',
                        }
                    ],
                }
            },
            created() {
                this.getVarityState()
                this.getDepartmentState()

            },
            methods: {
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                    this.currentPage = 1;
                    this.pageSize = val;
                },
                //当前页改变时触发 跳转其他页
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                    this.currentPage = val;
                },

                tableRowClassName(row) {

                    if (row.row.state == "1") {
                        return 'warning-row';
                    } else if (row.row.state == "0") {
                        return 'default-row ';
                    }
                    return '';
                },
                sum(){
                    fetch(`/patientTransfusionInformation/normal/getPayPrice?patientId=${this.registerForm.medicalRecordNumber}`).then(res => res.json()).then(res => {
                        this.payForm[0].totalMoney=res.data[0].totalMoney
                        this.payForm[0].patientId=this.registerForm.medicalRecordNumber
                        this.payForm[0].name=this.tableDataPay[0].name
                        this.caculateState=true
                    })
                },
                cancel(){
                    this.payForm.name=''
                    this.payForm.patientId= ''
                    this.payForm.totalMoney = ''
                    this.bloodData=undefined;
                    this.caculateState = false
                    this.idSearch=false
                },
                loadById() {
                    this.bloodData=undefined;
                    fetch(`/patientTransfusionInformation/normal/getBloodRecoredById?bloodId=${this.registerForm.bloodId}`).then(res => res.json()).then(res => {
                        this.bloodData = res.data
                        this.idSearch=true
                    })
                },
                load() {
                    // 请求所有用户数据  `` 是 ES6的模板字符串语法
                    console.log(this.medicalRecordNumber)
                    fetch(`/patientInformation/normal/getPatientById?medicalRecordNumber=${this.registerForm.medicalRecordNumber}`).then(res => res.json()).then(res => {
                        this.tableData = res.data
                        if (this.tableData.length==0){
                            this.isFlag=false
                        }else{
                            this.isFlag=true
                        }
                    })
                    this.tableDataPay=undefined;
                    fetch(`/patientTransfusionInformation/normal/getPayPriceList?payState=${this.state}&patientId=${this.registerForm.medicalRecordNumber}`).then(res => res.json()).then(res => {
                        this.tableDataPay = res.data
                    })
                }

            }

        });
    })()
</script>

</body>

</html>
